<template>
  <div>
    <div class="data">
      <div class="data-title">
        <div class="title-center">充电桩数据概览</div>
      </div>
      <div class="showTime">{{ timeName }}</div>
      <div class="data-content">
        <div class="con-left fl">
          <div class="left-top">
            <div class="info boxstyle">
              <div class="title">实时统计</div>
              <div class="info-main">
                <ul>
                  <li>
                    <img src="../assets/img/picture/info-img-2.png" alt="" /><span
                      >充电桩总数(个)</span
                    >
                    <p>{{ deviceCount }}</p>
                  </li>
                  <li>
                    <img src="../assets/img/picture/info-img-2.png" alt="" /><span
                      >当前使用数(个)</span
                    >
                    <p>{{ onlineNum }}</p>
                  </li>
                  <li>
                    <img src="../assets/img/picture/info-img-3.png" alt="" /><span
                      >今日活跃数(个)</span
                    >
                    <p>{{ onlineNum }}</p>
                  </li>
                  <li>
                    <img src="../assets/img/picture/info-img-4.png" alt="" /><span
                      >今日活跃率(%)</span
                    >
                    <p>{{ active }}%</p>
                  </li>
                </ul>
              </div>
            </div>
            <div class="top-bottom boxstyle">
              <div class="title">警告类型分类</div>
              <echartsOne id="echarts_1" class="charts"></echartsOne>
            </div>
          </div>
          <div class="left-bottom boxstyle">
            <div class="title">充电桩分类</div>
            <echartsTwo id="echarts_2" class="charts"></echartsTwo>
          </div>
        </div>
        <div class="con-center fl">
          <div class="map-num">
            <p>充电桩实时使用分布</p>
            <div class="num">
              <span v-for="(item, index) in deviceCount.toString()" :key="index">{{
                item
              }}</span>
            </div>
          </div>
          <div class="china">
            <map2></map2>
          </div>
          <div class="cen-bottom boxstyle">
            <div class="title">车辆充电高峰时间</div>
            <echartsThree id="echarts_3" class="charts"></echartsThree>
          </div>
        </div>
        <div class="con-right fr">
          <div class="right-top boxstyle">
            <div class="title">充电站最多的省份top10</div>
            <echartsFour id="echarts_4" class="charts"></echartsFour>
          </div>
          <div class="right-center boxstyle">
            <div class="title">充电桩的收入TOP5</div>
            <echartsFive id="echarts_5" class="charts"></echartsFive>
          </div>
          <div class="right-bottom boxstyle">
            <div class="title">使用电站人数TOP5</div>
            <echartsSix id="echarts_6" class="charts"></echartsSix>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echartsOne from "@/components/echarts_1";
import echartsTwo from "@/components/echarts_2";
import echartsThree from "@/components/echarts_3";
import echartsFour from "@/components/echarts_4";
import echartsFive from "@/components/echarts_5";
import echartsSix from "@/components/echarts_6";
import map2 from "@/components/map";
import "@/assets/china.js";
export default {
  name: "Home",
  data() {
    return {
      deviceCount: "",
      onlineNum: "",
      timeName: ''
    };
  },
  components: {
    echartsOne,
    echartsTwo,
    echartsThree,
    echartsFour,
    echartsFive,
    echartsSix,
    map2,
  },
  mounted() {
    this.getDeviceCount();
    // this.getDeviceTypeCount()
    this.getOnlineNums();
    this.fun();
  },
  methods: {
    // 请求充电桩总数
    async getDeviceCount() {
      let result = await this.$API.reqSelectDeviceCount();
      // 成功后存储支付信息
      this.deviceCount = result;
    },
    // 充电桩在线数量
    async getOnlineNums() {
      let result = await this.$API.reqSelectOnlineNums();
      this.onlineNum = result[0].deviceNums;
    },

    fun() {
      setInterval(() => {
        let dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours(); //获取时
        var m = dt.getMinutes(); //获取分
        var s = dt.getSeconds(); //获取秒
        // console.log(this.$refs.timeo);
        let a =
          "当前时间：" +
          y +
          "年" +
          mt +
          "月" +
          day +
          "-" +
          h +
          "时" +
          m +
          "分" +
          s +
          "秒";
        console.log(a);
        this.timeName = a;
      }, 1000);
    },
  },
  computed: {
    // 计算属性计算今日活跃率字段active
    active() {
      return ((this.onlineNum / this.deviceCount) * 100).toString().slice(0, 5);
    },
  },
};
</script>

<style>
body,
html {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

* {
  font-family: "微软雅黑";
}

body {
  background: #010e50 url(../assets/img/bg.jpg) center top no-repeat;
  background-size: 100% auto;
}

.map {
  margin-top: 15px;
  /* position: absolute; */
  /* top: 40px; */
  top: 0;
  left: 0;
}

.boxstyle {
  border: 1px solid rgba(100, 162, 255, 0.2);
  box-sizing: border-box;
  position: relative;
  /* margin-top: 15px; */
  background: rgba(0, 35, 120, 0.36);
}

.boxstyle:after,
.boxstyle:before {
  position: absolute;
  content: "";
  width: 20px;
  height: 30px;
}

.boxstyle:before {
  border-left: 1px solid #0258f0;
  border-top: 1px solid #0258f0;
  left: -1px;
  top: -1px;
}

.boxstyle:after {
  border-right: 1px solid #0258f0;
  border-bottom: 1px solid #0258f0;
  right: -1px;
  bottom: -1px;
}

.title {
  height: 35px;
  font-size: 18px;
  line-height: 35px;
  width: 100%;
  color: #fff;
  font-weight: 600;
  padding-left: 15px;
  position: relative;
  box-sizing: border-box;
}

.title:after {
  position: absolute;
  content: "";
  width: 20%;
  height: 1px;
  background: #0258f0;
  left: 5%;
  opacity: 0.4;
  bottom: 0;
}

.showTime {
  position: absolute;
  top: 8px;
  right: 10px;
  line-height: 0.9375rem;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 800;
}

.data {
  width: 100%;
  height: 100%;
}

.data > .data-title {
  width: 100%;
  /* height: 90px; */
  box-sizing: border-box;
}

.data > .data-title > .title-center {
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
  text-align: center;
  line-height: 60px;
  letter-spacing: 4px;
  color: #fff;
  font-size: 40px;
  font-weight: bolder;
  box-sizing: border-box;
}

.data > .data-content {
  width: 100%;
  height: calc(100% - 105px);
  padding: 0 20px 20px 20px;
  box-sizing: border-box;
}

.data > .data-content > .con-left {
  width: 23.4375%;
  height: 100%;
  float: left;
}

.data > .data-content > .con-left > .left-top {
  width: 100%;
  height: calc(75% - 15px);
  position: relative;
}

.data > .data-content > .con-left > .left-top > .info {
  height: 62%;
  width: 100%;
}

.info-main li {
  float: left;
  width: 50%;
  /* padding-bottom: 10px; */
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.info-main li:nth-child(1) {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.info-main li:nth-child(1) img {
  margin-top: 0;
}
.info-main li:nth-child(2) img {
  margin-top: 0;
}

.info-main li:nth-child(2) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 0;
}

.info-main li:nth-child(3) {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.info-main li img {
  display: block;
  margin: 0 auto 5px auto;
}

.info-main li span {
  font-size: 12px;
  color: #fff;
  opacity: 0.6;
}

.info-main li p {
  font-size: 24px;
  color: #fff;
  font-weight: bold;
  margin: 0;
}

.info-main ul {
  overflow: hidden;
  padding: 0;
}

.con-left > .left-top > .top-bottom {
  height: calc(38% - 20px);
  width: 100%;
  /* width: 350px; */
  margin-top: 10px;
  margin-bottom: 10px;
}

.con-left > .left-bottom {
  width: 100%;
  height: 27vh;
  margin-bottom: 10px;
}

.con-center {
  width: 53.125%;
  height: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  position: relative;
  float: left;
}

.map-num {
  width: 500px;
  height: 120px;
  position: absolute;
  top: 15px;
  left: 50px;
  z-index: 1000;
}

.map-num > p {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.map-num span {
  display: inline-block;
  width: 50px;
  height: 65px;
  text-align: center;
  line-height: 65px;
  background: rgba(0, 35, 120, 0.56);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  color: #fff;
  font-size: 68px;
  font-weight: 600;
  font-family: LcdD;
  margin-top: 15px;
}

.data > .data-content > .con-center > .cen-top {
  width: 100%;
  height: calc(75% - 20px);
  margin-bottom: 20px;
}

.data > .data-content > .con-center > .cen-bottom {
  width: 100%;
  height: 27vh;
}

.data > .data-content > .con-right {
  width: 23.4375%;
  height: 90vh;
  float: left;
}

.data > .data-content > .con-right > .right-top {
  width: 100%;
  height: 30%;
  margin-bottom: 10px;
}

.data > .data-content > .con-right > .right-center {
  width: 100%;
  height: 30%;
  margin-bottom: 30px;
}

.data > .data-content > .con-right > .right-bottom {
  width: 100%;
  height: 30%;
  margin-bottom: 10px;
}

.data > .data-content .charts {
  width: 100%;
  height: calc(100% - 35px);
}

/*青岛研锦网络科技有限公司   版权所有*/
.loading {
  position: fixed;
  left: 0;
  top: 0;
  font-size: 16px;
  z-index: 100000000;
  width: 100%;
  height: 100%;
  background: #1a1a1c;
  text-align: center;
}

.loadbox {
  position: absolute;
  width: 160px;
  height: 150px;
  color: #324e93;
  left: 50%;
  top: 50%;
  margin-top: -100px;
  margin-left: -75px;
}

.loadbox img {
  margin: 10px auto;
  display: block;
  width: 40px;
}
</style>
